<template>
  <div class="login">
    <el-image class="position" :src="url" style="z-index: -999999; box-shadow: 10px 5px 51px;"/>
    <el-col :span="6" style="margin: 140px 0 0 530px;">
      <el-card >
        <el-form
        :model="form"
        :rules="rules"
        ref="formRef"
        style="height: 300px;"
        class="fromActive"
        >
          <div style="padding: 30px 0 40px 0;">
            <div style="color: black; font-size: 20px; font-weight: 700; margin-bottom: 8px;">欢迎登陆</div>
            <div style="color: #ccc; font-size: 14px;">左右软件后勤系统</div>
          </div>
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="登录名">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" >
            <el-input v-model="form.password" placeholder="密码">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <div style="margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between;">
            <el-checkbox @click="onLogin" label="自动登陆" size="large" />
            <div style="font-size: 15px; color: cornflowerblue;" @click="onPassword">忘记密码</div>
          </div>

          <el-form-item>
            <el-button style="width: 300px;" color="#626aef" type="primary" @click="onSubmit">登 录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const url =
  "https://tse3-mm.cn.bing.net/th/id/OIP-C.6szqS1IlGtWsaiHQUtUOVwHaQC?w=115&h=183&c=7&r=0&o=5&dpr=1.3&pid=1.7";
const form = ref({
  username: "",
  password: "",
});

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
})

const onSubmit = () => {
  console.log('登陆')
}

const onPassword = () => {
  console.log("忘记密码")
}

const onLogin = () => {
  // 判断token存储密码没有如果没有就不执行， 如果有就把token里的password放到password上
  console.log("自动登陆")
}

</script>

<style lang="less" scoped>
:deep(el-card__body) {
  z-index: 9999;
}
.position {
  width: 70vw;
  height: 50vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
